The appearance ref is currently scoped within the useAppearance composable. Meaning that whenever you import the useAppearance composable a new appearance ref instance will be created. When you need the appearance in multiple places in your app you'll end up with different appearance instances, while its useful if the appearance instance would be the same/stay in sync between all components where it's used.

Moving the appearance definition outside useAppearance resolves this, resulting in the same appearance instance being returned when importing it like:

import { useAppearance } from "@/Composables/useAppearance";

const { appearance } = useAppearance();